<template>
	<div>
		<!-- <img :src="carInfo.url" alt width="100%" @click="show = true" /> -->
		<van-swipe :autoplay="3000">
			<van-swipe-item v-for="(image, index) in carInfo.bannerUrls" :key="index">
				<img v-lazy="image" width="100%" @click="show=true"/>
			</van-swipe-item>
		</van-swipe>
		<h1>{{ carInfo.title }}</h1>

		<!-- <van-overlay :show="show">
			<van-tabs>
				<van-tab :title="v.title" v-for="v in carInfo.urls" :key="v.id">
					<div class="img-list">
						<img
							:src="item"
							v-for="(item, i) in v.childrenUrls"
							:key="i"
							width="32%"
							@click="handleClick(v.childrenUrls)"
						/>
					</div>
				</van-tab>
			</van-tabs>
		</van-overlay>-->

		<van-overlay :show="show">
			<div style="background: #fff;">
				<div class="item" v-for="v in carInfo.urls" :key="v.id">
					<h2>{{ v.title }}</h2>
					<img
						:src="item"
						alt
						v-for="(item, i) in v.childrenUrls.slice(0, 6)"
						:key="i"
						@click="handleClick(v.childrenUrls)"
					/>
				</div>
			</div>
		</van-overlay>
	</div>
</template>


<script>
import { fetchCarInfo } from '../../api'
import { ImagePreview } from 'vant';
export default {
	data() {
		return {
			carInfo: {},
			show: false
		}
	},
	created() {
		this.getData()
	},
	methods: {
		async getData() {
			const id = this.$route.params.id;

			const resp = await fetchCarInfo({ id })

			this.carInfo = resp.data.data

			console.log(resp.data.data);

		},
		handleClick(urls) {
			ImagePreview(urls)
		}
	}
}
</script>